<!DOCTYPE html>
<html>
    <head>
        <title>>ระบบสารสนเทศภูมิศาสตร์เพื่อการตัดสินใจ (Gis-DSS : GIS Decision SupportSystem)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />        
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
        <script type="text/javascript" src="js/userlogin.js"></script>
        <style type="text/css">   
            #headerID{
                height: 43px; 
            } 
            #loginform{
                width: 250px;
                height: 280px;
                border-radius: 36px 36px 36px 36px;
                position: relative;                                                                
                padding: 1.4%;             
                margin: 10% auto;       
                background-image: url('http://softwaredeedee.lnwshop.com/system/application/modules/lnwshopweb/_images/page404/bg.jpg');
                background-repeat:  repeat-x;                     
                color: #000;           
            }
            #buttonloginDIV{
                width: 200px;
                left: 50%;
                margin-left: 18px;           
            }     
            .ui-dialog-contain {
                width: 92.5%;
                max-width: 350px;
                margin: 6% auto 15px auto;
                padding: 10px;
                position: relative;
            }  
            a.youtube_button {
                display: block; 
                width: 35px; 
                height: 35px; 
                background-image: url("image/youtube_sprite.png");                         
                text-indent: -9999px;  
                top:5px;left:5px; position:fixed;
                background-repeat: no-repeat;
            }
            #RequirM {
                display: block; 
                width: 35px; 
                height: 35px; 
                background-image: url("image/hp-notepad2-pencil-icon.png");                         
                text-indent: -9999px;   
                top:6px;left:50px; position:fixed;
                background-repeat: no-repeat;                  
            }
            a.download {
                display: block; 
                width: 35px; 
                height: 35px; 
                background-image: url("image/camerareporter_sprite.png");                         
                text-indent: -9999px;  
                top:5px;left:95px; position:fixed;
                background-repeat: no-repeat;
            }
             a.youtube_button:hover, #RequirM:hover, a.download:hover {
                background-position: center; 
            }
             a.youtube_button:active,#RequirM:active ,a.download:active{
                background-position: bottom;
            }
            #Imagekatoon{
                position: fixed; top : 62%;left: 74%; opacity:0.8;
                 transform:rotate(0deg);
                 -ms-transform:rotate(0deg); /* IE 9 */
                 -webkit-transform:rotate(0deg); /* Safari and Chrome */
            }
            #btn_register{
                background:#3860BB;
                font-size: 7px;
            }
            
        </style>   
    </head>
    <body>
        <div data-role="page">
            <div id="headerID" data-role="header" data-theme="b" data-position="fixed" >
                <p><h2>ระบบสารสนเทศภูมิศาสตร์เพื่อการตัดสินใจ</h2></p>
                <a  id="btn_register" data-role="button" href="#DialogRegister"  data-transition="flip" 
                    data-rel="dialog" class="ui-btn-right" title="ลงทะเบียน">ลงทะเบียน</a>
                <div id="LogoImages">
                    <a href="#Youtube" class="youtube_button " data-role="none" data-rel="popup" data-position-to="window" 
                    title="วีดิโอสอนการใช้งาน"data-inline="true">วีดิโอสอนการใช้งาน</a>
                     
                    <a href="https://docs.google.com/forms/d/1ktqA65pcrcwf9Kn9bmmos--eCYEpkoVPiq4Fqju0P14/viewform?pli=1"  
                    data-role="none" id="RequirM" title="แบบสอบถาม">แบบสอบถาม</a> 

                   <a href="#download" class="download" data-role="none" data-rel="popup" data-position-to="window" 
                    title="GIS_CameraReporter"data-inline="true">GIS_CameraReporter</a>
                </div>
                <div  id="download"  class="ui-content" data-role="popup" data-overlay-theme="a" data-theme="b" data-corners="false" data-tolerance="15,15">
                    <a  href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                    <iframe src="download.php" width="454" height="355" ></iframe>
                </div>
                <div  id="Youtube"  class="ui-content" data-role="popup" data-overlay-theme="a" data-theme="e" data-corners="false" data-tolerance="15,15">
                    <a  href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                    <iframe src="youtube.php" width="454" height="355" ></iframe>
                </div>
            </div> 
                               
            <img id="Imagekatoon"border="0" src="image/basket.png"  alt="MWA" width="500" height="327">
            <form id="loginform" name="loginform" > 
                <div id="buttonloginDIV" >      
                    <center><h3>กรุณาเข้าสู่ระบบ</h3></center>
                    <center><div id="UserOnline" style="font-size: 14px;"> </div> </center>
                    <input maxlength=16 type="text" name="txtUsernameLogin" id="txtUsernameLogin"  
                        value="<?=$_COOKIE['CK_username']?>"placeholder="กรุณาระบุชื่อของคุณ">                    
                    <input maxlength=16 type="password" name="txtPasswordLogin" id="txtPasswordLogin" 
                     value="<?=$_COOKIE['CK_password']?>" placeholder="กรุณาระบุรหัสผ่านของคุณ">  
                    <table style="position: relative; margin: auto;float: left;">
                        <tr>
                            <td style="font-size: 13px;">จดจำรหัสผ่าน:</td>
                            <td><input name="CheckCookie" id="CheckCookie" type="checkbox" style="position: static;" value="1"
                                <?=( isset($_COOKIE['CK_username']) && $_COOKIE['CK_username'] !="" )?"checked":""?> />
                            </td>
                        </tr>
                    </table>
                    <br>                                                    
                    <a  onclick="SetCookie()" id="SEND" data-role="button" data-theme="b" data-inline="true"  
                        style=" margin:auto;float: right;">เข้าสู่ระบบ</a>                    
                </div>  
                <br> 
                <div id="time" style="left: 20px; position: relative; font-size: 12px; float: left;"></div>                
            </form>
            <div id="footer"data-role="footer" data-position="fixed">
                <h1>กองสารสนเทศภูมิศาสตร์ ฝ่ายมาตรฐานวิศวกรรมและสารสนเทศภูมิศาสตร์ การประปานครหลวง tel.1781</h1>    
            </div>
        </div>
        <div data-role="page" id="DialogRegister" data-overlay-theme = "b">
            <div id="headerID" data-role="header" data-theme="b" data-position="fixed"  >
                <h1>ลงทะเบียน</h1>
            </div> 
            <div data-role="content" >              
                <form id="DialogForm" style="position: relative; margin-left:37px;">
                    
                         
                    
                    <label>ชื่อผู้ใช้งาน</label>
                    <input maxlength=16 type="text" data-mini="true" name="RegisterUsername" id="RegisterUsername" placeholder="กรุณาระบุชื่อผู้ใช้งาน" style="width: 230px;">
                    <label>พาสเวิร์ด</label>
                    <input maxlength=16 type="password" data-clear-btn="true" data-mini="true" name="RegisterPassword" id="RegisterPassword" placeholder="กรุณาระบุรหัสผ่านของคุณ" style="width: 230px;">
                    <label>พาสเวิร์ดอีกครั้ง</label>
                    <input maxlength=16 type="password" data-clear-btn="true" data-mini="true" name="ReCheckRegisterPassword" id="ReCheckRegisterPassword" placeholder="กรุณาระบุรหัสผ่านของคุณอีกครั้ง" style="width: 230px;">

                    <label>รหัสพนักงานการประปานครหลวง</label>                        
                    <p id="text_emp_id" style="font-size:10px;"></p>                        
                    <input placeholder="รหัสพนักงานการประปานครหลวง"id="emp_id" data-mini="true" maxlength=8 type="text" style="width: 230px;">

                    <label>วันเดือนปีเกิด เช่น 1989-07-28</label>
                    <p id="text_emp_birtdate" style="font-size:10px;"></p>                        
                    <input placeholder="วันเดือนปีเกิด" maxlength=10 type="text" data-mini="true" data-clear-btn="true" id="emp_birtdate" value="" style="width: 230px;">

                    <label>รหัสบัตรประชาชน</label>
                    <input maxlength=13 type="text" data-mini="true" name="RegisterPID" id="RegisterPID" placeholder="กรุณาระบุรหัสบัตรประขาชนของคุณ" style="width: 230px;">
                    <label>อีเมลล์</label>
                    <input maxlength=80 type="text" data-mini="true" name="RegisterEMAIL" id="RegisterEMAIL" placeholder="กรุณาระบุอีเมลล์ของท่าน" style="width: 230px;">
                    <table style=" width: 250px; position: relative;">
                        <td >
                            <input id="RegisterID" type="button" value="ลงทะเบียน">       
                        </td>
                    </table>
                </form>           
            </div>
            <div data-role="footer" data-position="fixed" data-theme="b">
                <h6 style="font-size: 14px; font-style: oblique;">กองสารสนเทศภูมิศาสตร์ ฝ่ายมาตรฐานวิศวกรรมและสารสนเทศภูมิศาสตร์ การประปานครหลวง tel.1781</h6>
            </div>
        </div>
    </body>
</html>